---
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
import { BookOpenIcon, FileText } from 'lucide-react';
---

<VerticalSideBarLayout title="Custom Documentation">
  <div class="min-h-[calc(100vh-60px)] bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
      {/* Hero Section */}
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
        <div>
          <div class="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 font-medium text-sm mb-6">
            <FileText className="w-4 h-4 mr-2" />
            New: Bring your documentation into EventCatalog
          </div>
          <h1 class="text-4xl font-bold text-gray-900 tracking-tight mb-4">
            Document Everything. Share Knowledge. Build Better.
          </h1>
          <p class="text-xl text-gray-600 mb-8">
            Add your own documentation to EventCatalog — from ADRs and system guides to runbooks and onboarding material. Connect
            your knowledge to your architecture.
          </p>
          <div class="flex flex-col sm:flex-row gap-4 mb-8">
            <a
              href="https://demo.eventcatalog.dev/docs/custom/guides/creating-new-microservices/01-index"
              target="_blank"
              class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-150"
            >
              View the demo
              <svg class="ml-2 w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fill-rule="evenodd"
                  d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                  clip-rule="evenodd"></path>
              </svg>
            </a>
            <a
              href="https://www.eventcatalog.cloud"
              target="_blank"
              class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-150"
            >
              Try for free
            </a>
          </div>
          <p class="text-sm text-gray-500">
            Available with EventCatalog Starter or Scale plans
            <a href="https://www.eventcatalog.dev/pricing" class="text-blue-600 font-medium block"
              >Try free for 14 days, no credit card required</a
            >
          </p>
        </div>

        <div class="relative">
          <div class="absolute -inset-4">
            <div
              class="w-full h-full max-w-full mx-auto opacity-30 blur-lg filter"
              style="background: linear-gradient(90deg, #60A5FA 0%, #3B82F6 100%);"
            >
            </div>
          </div>
          <div class="relative">
            <img
              src="/images/custom-docs-placeholder.png"
              alt="Custom Documentation Preview"
              class="rounded-xl shadow-xl border border-gray-200"
            />
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Centralized Knowledge</h3>
          <p class="text-gray-600">
            Keep architecture decisions, system guides, and runbooks in one place — easy to access, easy to trust.
          </p>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"
              ></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Rich Formatting</h3>
          <p class="text-gray-600">
            Use Markdown, diagrams, code blocks, and EventCatalog components to create structured, useful documentation.
          </p>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"
              ></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Version Control</h3>
          <p class="text-gray-600">Track changes and ensure your documentation grows alongside your system.</p>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
              ></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Documentation Ownership</h3>
          <p class="text-gray-600">Assign and track document owners, making it easy to find the right person in seconds.</p>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Customizable Sidebars</h3>
          <p class="text-gray-600">
            Auto-generated and fully customizable navigation sidebars to organize your documentation perfectly.
          </p>
        </div>

        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-200">
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"></path>
            </svg>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">EventCatalog Chat</h3>
          <p class="text-gray-600">
            Interact with your documentation using AI-powered chat to find answers quickly and efficiently.
          </p>
        </div>
      </div>

      {/* Bottom Link */}
      <div class="mt-16 text-center">
        <a
          href="https://www.eventcatalog.dev/docs/development/guides/customize-sidebars/application-sidebar"
          target="_blank"
          class="text-sm text-gray-400 hover:text-gray-500 transition-colors duration-150"
        >
          Not ready for custom documentation? You can hide this feature in settings
        </a>
      </div>
    </div>
  </div>
</VerticalSideBarLayout>

<style>
  .scroll-smooth {
    scroll-behavior: smooth;
  }
</style>
